// ------login page
import { Component, Vue } from 'vue-property-decorator';
import Http, { Api } from '@/request';
import { Action, Getter } from 'vuex-class';
import { RegisterState } from '../../../store/module/register/register.interface';
// import {RegisterState} from "@/store/module/views/login/register/register.interface.ts";

@Component({
  components: {}
})
export default class Register extends Vue {
  @Action
  private registerHttp!: (data: RegisterState) => Promise<any>;
  private title: string = 'Register';
  private form: any;
  private disabledButton: boolean = true;

  private checkUserId: object | string[] = [
    'userId',
    {
      rules: [
        { type: 'string', message: '请输入有效的用户名' },
        { required: true, message: '请输入您的用户名', whitespace: true }
      ]
    }
  ];
  private checkPwd: object | string[] = [
    'password',
    {
      rules: [
        { required: true, message: '请输入密码！' },
        { validator: this.validateToNextPassword }
      ]
    }
  ];
  private checkConfirmPwd: object | string[] = [
    'confirmPassword',
    {
      rules: [
        { required: true, message: '请输入密码！' },
        { validator: this.compareToFirstPassword }
      ]
    }
  ];
  private checkEmail: object | string[] = [
    'email',
    {
      rules: [
        { type: 'email', message: '请输入有效的邮箱！' },
        { required: false, message: '请输入您的邮箱！' }
      ]
    }
  ];
  private checkNickName: object | string[] = [
    'name',
    {
      rules: [{ whitespace: true }]
    }
  ];
  // private checkPhone: object | string[] = [
  //   'phone',
  //   {
  //     rules: [{ required: false, whitespace: true }]
  //   }
  // ];
  // private checkCaptcha: object | string[] = [
  //   'captcha',
  //   {
  //     rules: [
  //       // {type: 'number', message: '请输入有效的验证码',},
  //       { required: true, message: '请输入验证码', whitespace: true }
  //     ]
  //   }
  // ];
  private checkAgreement: object | string[] = [
    'agreement',
    {
      // rules: [
      //     {required: true, message: `请勾选 "阅读并接受《百度用户协议》"`}
      // ],
      valuePropName: 'checked'
    }
  ];
  private confirmDirty: boolean = false;
  private formItemLayout: object = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 }
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 }
    }
  };
  private tailFormItemLayout: object = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0
      },
      sm: {
        span: 16,
        offset: 8
      }
    }
  };

  private beforeCreate() {
    this.form = this.$form.createForm(this);
  }

  private created() {}

  /**
   * 注册
   * @param e
   */
  private handleSubmit(e: Event) {
    const _this = this;
    e.preventDefault();
    this.form.validateFieldsAndScroll((err: any, values: any) => {
      if (!err) {
        if (values.agreement) {
          const params: RegisterState = {
            username: values.userId,
            password: values.password,
            email: values.email,
            name: values.name
            // phone: values.phone
          };
          console.log('接收到的表单的值: ', values);
          this.registerHttp(params).then(res => {
            console.log('注册接口响应值：', res.data);
            // 未完待续...
            if (res.data.success) {
              console.log('注册成功，应该提示创建团队', res.data);
              this.$message.success('注册成功');
              this.$router.push('login');
            } else {
              console.log('失败的操作，应该提示用户', res.data);
              this.$message.error(res.data.errorMsg);
            }
          });
        } else {
          // _this.$message.info(`请勾选 "阅读并接受《百度用户协议》"`);
        }
      }
    });
  }

  private handleConfirmBlur(e: any) {
    const value = e.target.value;
    this.confirmDirty = this.confirmDirty || !!value;
  }

  private compareToFirstPassword(rule: {}, value: string, callback: any) {
    const form = this.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('您输入的两个密码不一致！');
    } else {
      callback();
    }
  }

  private validateToNextPassword(rule: {}, value: string, callback: any) {
    const form = this.form;
    if (value && this.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }
  private changeCheckbox(db: boolean) {
    this.disabledButton = !db;
  }
}
